 

<template>
    <tm-app class="createCircle" bgImg="f5">
        <view
            class="content"
            :style="{ top: systemInfo.statusBarHeight + 'px' }"
        >
            <tm-navbar
                style="background-color: #fff"
                :height="50"
                :margin="[0, 0]"
                :padding="[0, 0]"
                :isPlace="false"
                :fontSize="32"
                title="编辑群"
                :transprent="true"
                :beforeBack="beforeBack"
            >
            </tm-navbar>

            <scroll-view v-show="currentStep==='step1'" class="scr" :scroll-y="true" >
                <view class="step_box d-flex a-center j-center">
                    <view
                        class="step step1 d-flex d-c a-center j-center active"
                    >
                        <view class="dot d-flex a-center j-center">1</view>
                        <view class="text">基础信息</view>
                    </view>
                    <view class="line"></view>
                    <view class="step step2 d-flex d-c a-center j-center">
                        <view class="dot d-flex a-center j-center">2</view>
                        <view class="text">详细信息</view>
                    </view>
                </view>

                <view class="box">
                    <view class="slim_form">
                        <view class="slim_row needActive">
                            <view class="left_box"> 名称 </view>
                            <view class="right_box">
                                <input
                                    style="width:500rpx;"
                                    class="inp"
                                    placeholder-style="color:#ccc"
                                    v-model="circleName"
                                    placeholder="限10个字符"
                                    type="text"
                                    @input="checkLength(20)"
                                />
                            </view>
                        </view>

                        

                        <view class="slim_row">
                            <view class="left_box">成员数</view>
                            <view class="right_box">
                                <picker @change="maxUserCountPicker"  :range="userCountArr">
                                    <view class="text">{{ maxUserCount }}</view>
                                </picker>
                                <i class="icon icon-more-2 more"></i>
                            </view>
                        </view>

                        <view class="slim_row needActive">
                            <view class="left_box"> 入群费</view>
                            <view class="right_box">
                                <tm-radio-group v-model="needPay">
                                    <tm-radio color="#1DC691"  :fontSize="30" :value="0" label="免费"></tm-radio>
                                    <tm-radio color="#1DC691"  :fontSize="30" :value="1" label="付费"></tm-radio>
                                </tm-radio-group>
                            </view>
                        </view>



                        

                        <view class="slim_row needActive" v-show="needPay===1">
                            <view class="left_box"> 金额 </view>
                            <view class="right_box">
                                <input
                                    class="inp"
                                    @input="checkNum"
                                    placeholder-style="color:#ccc"
                                    v-model="payAmount"
                                    placeholder="请输入金额,最大9999"
                                    type="number"
                                />
                                <view style="height:30rpx;position:relative;top:-2px" class="d-flex a-center"><text class="psr" style="font-size:30rpx;">元</text></view>
                            </view>
                        </view>

                        <view class="slim_row needActive">
                            <view class="left_box">
                                <text>时限</text>
                                <image class="ask" src="/static/ask.png"></image>
                            </view>
                            <view v-show="needPay===1" class="right_box">
                                <picker @change="timeLimitPicker" rangeKey="text"  :range="timeArr">
                                    <view class="text">{{ timeLimitText }}</view>
                                </picker>
                                <i class="icon icon-more-2 more"></i>
                            </view>
                            <view v-show="needPay===0" class="right_box">
                                <view class="text">{{ timeLimitText }}</view>
                            </view>
                        </view>

                    </view>

                    <!-- <view class="row d-flex a-center">
                            <view class="pre d-flex a-center">
                                <view class="req">*</view>
                                名称:
                            </view>
                            <view class="inp_box d-flex a-center">
                                <uni-easyinput :trim="true" type="text" :maxlength="10" v-model="circleName" primaryColor="#23e2a6"  placeholder="名称不能超过10个字符"></uni-easyinput>
                            </view>
                        </view> -->

                    <!-- <view class="row d-flex a-center">
                            <view class="pre d-flex a-center">
                                <view class="req">*</view>
                                成员数:
                            </view>
                            <view class="inp_box d-flex a-center">
                                <uni-data-select
                                    v-model="maxUserCount"
                                    :localdata="peopleSelects"
                                    @change="handlePeopleselect"
                                    :clearable="false"
                                ></uni-data-select>
                            </view>
                        </view> -->

                    <!-- <view class="row d-flex a-center">
                            <view class="pre d-flex a-center">
                                <view class="req">*</view>
                                收费:
                            </view>
                            <view class="inp_box d-flex a-center">
                                <uni-easyinput :trim="true" type="text" :maxlength="10" v-model="payAmount" primaryColor="#23e2a6" placeholder="免费¥"></uni-easyinput>
                            </view>
                        </view> -->
                </view>

                <view
                    class="box"
                    style="
                        margin-top: 10rpx;
                        border-radius: 20rpx;
                        background: #fff;
                    "
                >
                    <view class="title">提供服务</view>
                    <view class="service d-flex a-center j-around">
                        <view
                            class="card d-flex d-c j-center a-center"
                            v-for="item in systemService"
                            :class="{ checked: service.includes(item.id) }"
                            @tap="handleCheckService(item.id)"
                        >
                            <view class="rect d-flex a-center j-center">
                                <image
                                    v-show="service.includes(item.id)"
                                    class="img"
                                    :src="`/static/createCircle/${item.id}-h.png`"
                                ></image>
                                <image
                                    v-show="!service.includes(item.id)"
                                    class="img"
                                    :src="`/static/createCircle/${item.id}.png`"
                                ></image>
                            </view>
                            <view class="text d-flex a-center j-center">
                                体重饮食打卡
                            </view>
                        </view>
                        <!-- <view
                            class="card d-flex d-c j-center a-center"
                            :class="{ checked: service.includes(10002) }"
                            @tap="handleCheckService(2)"
                        >
                            <view class="rect d-flex a-center j-center">
                                <image
                                    v-show="service.includes(2)"
                                    class="img"
                                    src="/static/createCircle/2-h.png"
                                ></image>
                                <image
                                    v-show="!service.includes(2)"
                                    class="img"
                                    src="/static/createCircle/2.png"
                                ></image>
                            </view>
                            <view class="text d-flex a-center j-center">
                                辅助运动辅导
                            </view>
                        </view>

                        <view
                            class="card d-flex d-c j-center a-center"
                            :class="{ checked: service.includes(3) }"
                            @tap="handleCheckService(3)"
                        >
                            <view class="rect d-flex a-center j-center">
                                <image
                                    v-show="service.includes(3)"
                                    class="img"
                                    src="/static/createCircle/3-h.png"
                                ></image>
                                <image
                                    v-show="!service.includes(3)"
                                    class="img"
                                    src="/static/createCircle/3.png"
                                ></image>
                            </view>
                            <view class="text d-flex a-center j-center">
                                专属方案定制
                            </view>
                        </view>

                        <view
                            class="card d-flex d-c j-center a-center"
                            :class="{ checked: service.includes(4) }"
                            @tap="handleCheckService(4)"
                        >
                            <view class="rect d-flex a-center j-center">
                                <image
                                    v-show="service.includes(4)"
                                    class="img"
                                    src="/static/createCircle/4-h.png"
                                ></image>
                                <image
                                    v-show="!service.includes(4)"
                                    class="img"
                                    src="/static/createCircle/4.png"
                                ></image>
                            </view>
                            <view class="text d-flex a-center j-center">
                                全天督促负责
                            </view>
                        </view> -->
                    </view>
                </view>

                <view class="box" style="margin-top: 10rpx">
                    <view class="title">群类型</view>
                    <view class="tags d-flex a-center wrap">
                        <view
                            v-for="tag in systemConfig.groupTag"
                            class="check_tag"
                            :class="{ checked: selectedTag === tag.slimKey }"
                            @tap="handleCheckTag(tag)"
                        >
                            <text class="text">{{ tag.slimValue }}</text>
                        </view>
                    </view>
                </view>

                <view class="box" style="margin-top:10rpx;">
                    <view class="slim_form">
                        <view class="slim_row">
                            <view class="left_box">入群需要群主审核</view>
                            <view class="right_box">
                                <tm-switch
                                    barIcon=""
                                    offIcon=""
                                    size="normal"
                                    color="#23e2a6"
                                    :defaultValue="needAuth"
                                    @change="handleNeedAuthChange"
                                ></tm-switch>
                            </view>
                        </view>

                        <view class="slim_row">
                            <view class="left_box">游客模式<image class="ask" src="/static/ask.png"></image></view>
                            <view class="right_box">
                                <tm-switch
                                    barIcon=""
                                    offIcon=""
                                    size="normal"
                                    color="#23e2a6"
                                    :defaultValue="allowVisitor"
                                    @change="handleAllowVisitorChange"
                                ></tm-switch>
                            </view>
                        </view>
                    </view>

                </view>

                <view class="vip desp w-center d-flex j-center a-center">
                    <text class="toVip">成为VIP</text>可创建收费群并开启更多服务功能
                </view>


            </scroll-view>

            <scroll-view v-show="currentStep==='step2'" class="scr" :scroll-y="true">
                <view class="step_box d-flex a-center j-center">
                    <view
                        class="step step1 d-flex d-c a-center j-center active"
                    >
                        <view class="dot d-flex a-center j-center">1</view>
                        <view class="text">基础信息</view>
                    </view>
                    <view class="line active"></view>
                    <view class="step step2 d-flex d-c a-center j-center active">
                        <view class="dot d-flex a-center j-center">2</view>
                        <view class="text">详细信息</view>
                    </view>
                </view>

                <view class="box" style="margin-top: 20rpx;padding-bottom:20rpx;">
                    <view class="title d-flex j-between">
                        <text>群头像</text>
                        <tm-button @tap="choseImage" :margin="[0]" :width="80" :fontSize="30" color="#1DC691" transprent text :shadow="0" size="mini" label="上传"></tm-button>
                    </view>

                    <view class="img_view d-flex a-center j-center" @tap="choseImage">
                        <i v-show="!circlePhoto" class="upload tmicon tmicon-cloudupload"></i>
                        <image
                            v-show="circlePhoto"
                                class="img"
                                :src="circlePhoto"
                                mode=""
                            ></image>

                    </view>

                </view>

                <view class="box" style="margin-top: 20rpx;padding-bottom:20rpx;">
                    <view class="title"
                        >补充说明</view>

                    <view style="width:100%;padding:0 20rpx;">
                        <uni-easyinput :inputBorder="false" type="textarea"  trim :autoHeight="true" placeholderStyle="color:#ccc;font-size:30rpx;" v-model="introduction" placeholder="补充群的规则，可提供的服务" ></uni-easyinput>
                    </view>
                </view>

                <view class="box" style="margin-top: 20rpx;padding-bottom:20rpx;">
                    <view class="title"
                        >成员要求</view
                    >
                    <view style="width:100%;padding:0 20rpx;">
                        <uni-easyinput :inputBorder="false" type="textarea"  trim :autoHeight="true" placeholderStyle="color:#ccc;font-size:30rpx;" v-model="introduction2" placeholder="补充群的规则，可提供的服务" ></uni-easyinput>
                    </view>
                    <!-- <tm-input
                        :transprent="true"
                        placeholder="对加入群的成员的要求"
                        type="textarea"
                        color="#f5f5f5"
                        :height="200"
                        :maxlength="500"
                        confirm-hold
                        :border="1"
                        :padding="[20, 20]"
                        v-model="introduction2"
                    ></tm-input> -->
                </view>


            </scroll-view>

            <view class="vip desp w-center d-flex j-center a-center">
                <text class="toVip">成为VIP</text>可创建收费群并开启更多服务功能
            </view>

            <tm-button v-if="currentStep==='step1'" class="btn_main w-center" :width="690" :shadow="0" :linear-color="['#64F1C5','#29DBA3']" linear="left" :fontSize="32" fontColor="#ffffff" @tap="nextStep" label="下一步"></tm-button>
            <tm-button v-if="currentStep==='step2'" class="btn_main w-center" :width="690" :shadow="0" :linear-color="['#64F1C5','#29DBA3']" linear="left" :fontSize="32" fontColor="#ffffff" @tap="create" label="创建群"></tm-button>
            <tm-message
                ref="msg"
                :width="315"
                :height="96"
                color="#9F9F9F"
                :round="6"
                :padding="[0, 0, 0, 0]"
                :margin="[0, 0, 0, 0]"
                :lines="2"
            ></tm-message>
        </view>
    </tm-app>
</template>

<script setup lang="ts">
import { ref, reactive, watch, nextTick, computed, onMounted, handleError } from "vue";
import { onReady, onShow, onLoad } from "@dcloudio/uni-app";
import { userData as userDataStore } from "@/store/userData";
import { systemInfo as systemInfoStore } from "@/store/systemInfo";
import { getSelectConfig, createCircle,getService } from "@/api/api";
import { BASE_URL } from "@/api/request";
import { handleJumpToChat } from "@/hooks/imHooks"
import { systemConfig as systemConfigStore } from "@/store/systemConfig";
import { chooseImage } from "@/utils/utils";
const systemConfig: any = systemConfigStore();
const userData: any = userDataStore();
const msg: any = ref(null);
const circleName: any = ref("");
const payAmount: any = ref(null);
const maxUserCount: any = ref(20);
const circlePhoto: any = ref(null);
const introduction: Ref<string> = ref("");
const introduction2: Ref<string> = ref("");

const allowVisitor = ref(true);
const needAuth = ref(true);

const currentStep = ref('step1');

const needPay = ref(0)


const checkNum = ()=>{
    let str = payAmount.value+'';
    let str1 = str.replace('.','');
    let num = Number(str1);
    if(num>9999){
        num=9999
    }
    nextTick(() => {
        if(num){
            payAmount.value = num;
        }else{
            payAmount.value = null;
        }
    })
    
}

const checkLength = (maxLength:number)=>{
    let content = circleName.value.trim();
    let str = ''
    let len=0;
    for(var i=0; i<content.length; i++) {
        //正则表达式判断中文
        if (/[\u4e00-\u9fa5]/.test(content[i])) {
            len+=2;
        } else {
            len++;
        }

        if(len<=maxLength){
            str+=content[i];
        }
    }
    nextTick(() => {
        circleName.value = str;
    })
}


const handleNeedAuthChange=(bool:boolean)=>{
    needAuth.value = bool;
}

const handleAllowVisitorChange=(bool:boolean)=>{
    allowVisitor.value = bool;
}


const userCountArr = ref([20,50,100,200,500])

const timeArr = ref(
    [
        {
            val:3,
            text:'3个月',
        },
        {
            val:6,
            text:'6个月',
        },
        {
            val:9,
            text:'9个月',
        },
        {
            val:12,
            text:'12个月',
        },
        {
            val:9999,
            text:'不限',
        },
    ]
)


const peopleSelects: any = ref([
    {
        text: "10",
        value: 10,
        disabled: false,
    },
    {
        text: "20",
        value: 20,
        disabled: false,
    },
    {
        text: "30",
        value: 30,
        disabled: false,
    },
    {
        text: "50（会员）",
        value: 50,
        disabled: true,
    },
    {
        text: "100（会员）",
        value: 50,
        disable: true,
    },
    {
        text: "200（会员）",
        value: 50,
        disable: true,
    },
    {
        text: "500（会员）",
        value: 50,
        disable: true,
    },
    {
        text: "1000（会员）",
        value: 50,
        disable: true,
    },
]);
const beforeBack = () => {
    if(currentStep.value==="step2"){
        currentStep.value="step1";
        return false;
    }   

    return true
};


const maxUserCountPicker = (e: any) => {
    const index = e.detail.value;
    maxUserCount.value = userCountArr.value[index];

};

const timeLimit = ref(999);
const timeLimitText = ref('不限');

const timeLimitPicker = (e: any) => {
    const index = e.detail.value;
    timeLimit.value = timeArr.value[index].val;
    timeLimitText.value = timeArr.value[index].text;
};





const choseImage = () => {
    chooseImage({
        success: (chooseImageRes) => {
            const token = uni.getStorageSync("api_token");
            const tempFilePaths = chooseImageRes.tempFilePaths;
            console.log("chooseImageRes");
            console.log(chooseImageRes);
            uni.showLoading();
            uni.uploadFile({
                header: {
                    token,
                },
                url: `${BASE_URL}/file/upload`, //仅为示例，非真实的接口地址
                filePath: tempFilePaths[0],
                name: "file",
                formData: {
                    'isCompress':1,
                },
                success: (uploadFileRes) => {
                    let res: any;

                    try {
                        res = JSON.parse(uploadFileRes.data);
                    } catch (error) {
                        uni.showToast({
                            icon: "none",
                            title:'请稍后再试',
                            duration: 1500,
                        });
                        return;
                    }

                    uni.hideLoading();

                    const { flag, data } = res;

                    console.log(flag);

                    if (flag !== 1) {
                        uni.showToast({
                            icon: "none",
                            title:'上传失败,请稍后再试',
                            duration: 1500,
                        });
                        return;
                    }

                    const { fileUrl } = data;

                    circlePhoto.value = fileUrl;
                },
                fail() {
                    uni.hideLoading();
                    uni.showToast({
                            icon: "none",
                            title:'上传失败,请稍后再试',
                            duration: 1500,
                    });
                },
            });
        },
    });
};

const systemInfo: any = systemInfoStore();

const service: any = reactive(['10000']);

const handleCheckService = (num: number) => {
    const _index = service.findIndex((item: number) => item === num);
    if (_index === -1) {
        service.push(num);
    } else {

        if(service.length===1){
            uni.showToast({
                            icon: "none",
                            title:'至少提供一种服务',
                            duration: 1500,
                    });
            return
        }
        service.splice(_index, 1);
    }
};

const selectedTag = ref("");

const handleCheckTag = (tag: any) => {
    selectedTag.value = tag.slimKey;
};

const getWarpweft = () => {

    /* #ifdef H5 */
        return { longitude: null, latitude: null }
            // uni.navigateTo({
            //     url: '/pages/discover/discover',
            // });
    /*#endif*/

    return new Promise((resolve, reject) => {
        uni.getLocation({
            type: "wgs84",
            async success(res) {
                console.log("当前位置的经度：" + res.longitude);
                console.log("当前位置的纬度：" + res.latitude);
                resolve({ longitude: res.longitude, latitude: res.latitude });
            },
            fail(err) {
                resolve({ longitude: null, latitude: null });
            },
        });
    });
};

const nextStep = ()=>{
    if (!circleName.value) {
        uni.showToast({
                            icon: "none",
                            title:'请输入名称',
                            duration: 1500,
                    });
        return;
    }

    if (!maxUserCount.value) {
        uni.showToast({
                            icon: "none",
                            title:'请选择成员数',
                            duration: 1500,
                    });
        return;
    }

    if (!selectedTag.value) {
        uni.showToast({
                            icon: "none",
                            title:'请选择群类型',
                            duration: 1500,
                    });
        return;
    }

    if(needPay.value===1){
        if(!payAmount.value){
            uni.showToast({
                            icon: "none",
                            title:'请输入金额',
                            duration: 1500,
                    });

            return
        }
    }

    if (!service.length) {
        uni.showToast({
                            icon: "none",
                            title:'请选择服务',
                            duration: 1500,
                    });
        return;
    }
    currentStep.value="step2";

};

const create = async () => {
    uni.showLoading({ title: "创建中" });
    const { longitude, latitude }: any = await getWarpweft();
    console.log("longitude");
    console.log(longitude);
    console.log(userData.id);

    if (!circleName.value) {
        uni.showToast({
                            icon: "none",
                            title:'请输入名称',
                            duration: 1500,
                    });
        uni.hideLoading();
        return;
    }

    if (!maxUserCount.value) {
        uni.showToast({
                            icon: "none",
                            title:'请选择成员数',
                            duration: 1500,
                    });
        uni.hideLoading();
        return;
    }

    if (!selectedTag.value) {
        uni.showToast({
                            icon: "none",
                            title:'请选择群类型',
                            duration: 1500,
                    });
        uni.hideLoading();
        return;
    }

    if (!introduction.value) {
        uni.showToast({
                            icon: "none",
                            title:'请输入补充说明',
                            duration: 1500,
                    });
        uni.hideLoading();
        return;
    }

    if (!introduction2.value) {
        uni.showToast({
                            icon: "none",
                            title:'请输入成员要求',
                            duration: 1500,
                    });
        uni.hideLoading();
        return;
    }

    if (!circlePhoto.value) {
        uni.showToast({
                            icon: "none",
                            title:'请上传群头像',
                            duration: 1500,
                    });
        uni.hideLoading();
        return;
    }

    if (!service.length) {
        uni.showToast({
                            icon: "none",
                            title:'请选择服务',
                            duration: 1500,
                    });
        uni.hideLoading();
        return;
    }


    const userGroupItemss = service.map((id:string)=>{
        const obj = systemService.value.find((item:any)=>item.id===id)
        return obj
    })


    console.log('groupServiceParams')
    console.log(userGroupItemss)


    const params = {
        name: circleName.value,
        maxUserCount: maxUserCount.value,
        payAmount: payAmount.value ? payAmount.value : 0,
        longitude,
        latitude,
        introduction: introduction.value,
        introduction2: introduction2.value,
        photo: circlePhoto.value,
        userId: userData.id,
        notice: "",
        labels: [selectedTag.value],
        isVisitor:allowVisitor.value?1:0,
        expiry:timeLimit.value,
        joinOption:needAuth.value?'NeedPermission':'FreeAccess',
        userGroupItemss,
    };
    console.log(params);
    const res: any = await createCircle(params);
    console.log("createCircle");
    console.log(res);

    const { flag, data } = res;
    uni.hideLoading();
    if (flag !== 1) {
        uni.showToast({
                            icon: "none",
                            title:'创建群失败，请稍后再试',
                            duration: 1500,
                    });
        return;
    }

    const { groupId: groupID } = data;
    if (groupID) {
        console.log("groupID");
        console.log(groupID);
        const conversationId = `GROUP${groupID}`;
        await handleJumpToChat(conversationId,'reLaunch').catch((err) => {
            uni.showToast({
                            icon: "none",
                            title:'跳转失败',
                            duration: 1500,
                    });
        });
        uni.hideLoading();
    }
};

watch(needPay, (newVal: number, oldVal: number) => {
    if(newVal===1){
        timeLimitText.value = '3个月';
        timeLimit.value = 3;
    }else{
        timeLimitText.value = '不限';
        timeLimit.value = 999;
    }
});

const systemService: any = ref([]);

onReady(() => {});

onLoad(async () => {
    const res:any =await getService({userId:'system'});
    const { flag, data} = res;
    if(flag===1){
        systemService.value = data.list;
    }
});
</script>

<style lang="scss" scoped>
.req {
    color: red;
}


.slim_form {
    border-radius: 20rpx;
    overflow: hidden;
    .slim_row {
        width: 100%;
        height: 80rpx;
        padding: 0 30rpx;
        background: #fff;
        display: flex;
        justify-content: space-between;
        align-items: center;
        &.needActive:active{
           background-color:#f5f5f5;
           opacity: .8;
        }

        .left_box {
            display:flex;
            align-items: center;
            font-size: 30rpx;
            color: $slim-text3;
        }
        .right_box {
            display: flex;
            align-items: center;
            color: $slim-text3;
            .inp {
                width: 350rpx;
                font-size: 30rpx;
                text-align: right;
            }

            .more {
                color: #ccc;
                font-size: 24rpx;
                margin-left: 10rpx;
            }
        }
    }
}

.createCircle {
    position: relative;
    width: 750rpx;
    height: 100%;
    .ask{
        width:32rpx;
        height:32rpx;
        margin-left:5rpx;
    }
    .content {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        background: #f5f5f5;
    }
    .scr {
        position: absolute;
        top: 50px;
        left: 0;
        right: 0;
        bottom: calc(constant(safe-area-inset-bottom) + 200rpx);
        bottom: calc(env(safe-area-inset-bottom) + 200rpx);
    }

    .step_box {
        width: 100%;
        height: 120rpx;
        background: #f5f5f5;
        .step {
            gap: 10rpx;
            .dot {
                width: 40rpx;
                height: 40rpx;
                border-radius: 50%;
                font-size: 24rpx;
                background: #dfdfdf;
                border: 1px solid #fff;
                color: #fff;
            }
            .text {
                font-size: 24rpx;
                color: #999;
            }
            &.step1 {
                margin-right: -28rpx;
            }
            &.step2 {
                margin-left: -28rpx;
            }
            &.active {
                .dot {
                    background: #23e2a6;
                }
                .text {
                    color: #1dc691;
                }
            }
        }

        .line {
            position: relative;
            width: 300rpx;
            height: 4rpx;
            background: #dfdfdf;
            border-radius: 6rpx;
            top: -20rpx;
            &.active {
                background: #23e2a6;
            }
        }
    }

    .box {
        width: 710rpx;
        margin: 0 auto;
        border-radius: 20rpx;
        background: #fff;
        .title {
            display: flex;
            align-items: center;
            font-size: 30rpx;
            height: 80rpx;
            padding: 0 30rpx;
            margin-bottom: 24rpx;
        }
        .service {
            width: 100%;
            padding: 0 25rpx;
            gap:20rpx;
            .card {
                position: relative;
                width: 150rpx;
                &.checked {
                    .rect {
                        background-color: rgba(35, 226, 166, 0.1);
                    }
                }
                .rect {
                    width: 150rpx;
                    height: 150rpx;
                    border-radius: 10rpx;
                    background:#F6F6F6;
                    .img {
                        width: 100%;
                        height: 100%;
                    }
                }

                .text {
                    font-size: 24rpx;
                    color: #666;
                    height: 70rpx;
                }
            }
        }

        .tags {
            width: 100%;
            padding: 0 30rpx;
            padding-bottom: 24rpx;
            gap: 24rpx;
            .check_tag {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 200rpx;
                height: 60rpx;
                font-size: 28rpx;
                border-radius: 35rpx;
                color: $slim-text3;
                border: 1px solid #ccc;
                .tmicon {
                    font-size: 28rpx;
                    margin-right: 5rpx;
                    &.tmicon-ios-star {
                        font-size: 24rpx;
                    }
                }
                &.checked {
                    color: #fff;
                    background: $slim-main;
                    border: none;
                }
            }
        }

        .photo {
            .img_content {
                width: 400rpx;
                height: 400rpx;
                border: 1px dotted #ddd;
                margin: 0 auto;
                margin-top: 20rpx;
                border-radius: 20rpx;
                color: #ddd;
                font-size: 28rpx;
                margin-top: 20rpx;
                overflow: hidden;
                .tmicon {
                    color: #ddd;
                    font-size: 100rpx;
                }
                .img {
                    width: 100%;
                    height: 100%;
                }
            }
        }

        .img_view{
            width:670rpx;
            height:670rpx;
            border:1px dashed #ccc;
            margin:0 auto;
            .upload{
                font-size:200rpx;
                color:#ccc;
            }
            .img{
                width:670rpx;
                height:670rpx;
            }
        }
    }

    .row {
        width: 100%;
        height: 100rpx;
        font-size: 30rpx;
        .pre {
            width: 200rpx;
            height: 100%;
            justify-content: center;
        }
        .inp_box {
            width: 470rpx;
            height: 100%;
            padding-right: 20rpx;
            .inp {
                width: 100%;
            }
        }
    }

    .desp {
        color: #999;
        font-size: 28rpx;
        height:80rpx;
        .toVip{
            color:#23e2a6;
        }
    }

    .vip{
        position:fixed;
        width:100%;
        bottom: calc(constant(safe-area-inset-bottom) + 100rpx );
        bottom: calc(env(safe-area-inset-bottom) + 100rpx );
    }

    .btn_main {
        position:fixed;
        display:block;
        height:80rpx;
        border-radius:40rpx;
        line-height:80rpx;
        bottom: calc(constant(safe-area-inset-bottom));
        bottom: calc(env(safe-area-inset-bottom));
        z-index:100;
    }

    .btn1 {
        display:block;
        height:80rpx;
        border-radius:40rpx;
        line-height:80rpx;
    }
}

.uni-easyinput__content{
    background-color:#f5f5f5 !important;
    padding:0 20rpx;
}
.uni-textarea-textarea{
    font-size:30rpx !important;
    color:$slim-text3;
}
.uni-picker-container .uni-picker-action.uni-picker-action-confirm{
    color:#1DC691 !important;
}
.uni-picker-container .uni-picker-item{
    color:#1DC691 !important;
}


</style>
